import React, { useState }from 'react';
import { Breadcrumb, Layout, theme } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
import {Outlet} from 'react-router-dom'
import MainMenu from '@/components/MainMenu/index'


const View: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer},
    } = theme.useToken();

    return (
        <Layout style={{ minHeight: '100vh' }}>
            {/* 左侧菜单部分 */}
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                <div className="logo" />
                <MainMenu/>
            </Sider>
            <Layout>
                <Header style={{ padding: 0, background: colorBgContainer, paddingLeft: '20px' }} >
                    {/* 面包屑 */}
                    <Breadcrumb style={{ lineHeight: '64px' }}>
                        <Breadcrumb.Item>User</Breadcrumb.Item>
                        <Breadcrumb.Item>Bill</Breadcrumb.Item>
                    </Breadcrumb>
                </Header>
                <Content style={{ margin: '10px 16px' }} >
                    <div
                        style={{
                            padding: 24,
                            height: '100%',
                            background: colorBgContainer,
                        }}
                    >
                        {/*  窗口部分  */}
                        <Outlet/>
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center', padding: '0px', lineHeight: '48px' }}>
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
};

export default View;